@extends('admin.layouts.main')
@section('header')
    @parent
    <style>
        .quoteBox{
            padding: 5px;
            margin-top: 10px;
        }
    </style>
@endsection
@section('content')
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <input class="layui-input dateInput startInput" type="text" placeholder="开始时间" />
            </div>
            <div class="layui-inline">
                <input class="layui-input dateInput endInput" type="text" placeholder="结束时间" />
            </div>
            <div class="layui-btn-group">
                <span class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm search-btn">
                    <i class="layui-icon">&#xe615;</i> 查询
                </span>
            </div>
            <div class="layui-inline">
                <input type="radio" name="type" value="week" title="周" lay-filter="type"/>
                <input type="radio" name="type" value="month" title="月" lay-filter="type"/>
                <input type="radio" name="type" value="quarter" title="三月" lay-filter="type"/>
            </div>
        </form>
    </blockquote>
    <div>
        <div id="chartBox" style="width: 80%;height: 300px;padding: 10px"></div>
    </div>
@endsection
@section('footer')
    @parent
    <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.common.min.js"></script>
    <script type="text/javascript">
        layui.config({
        base:'{{ asset('xman/extends') }}/'
        }).extend({
        //treetable: 'treetable-lay/treetable'
        }).use([ 'laytpl','table','form','laydate'],function () {
            var laytpl = layui.laytpl,
                table = layui.table,
                laydate = layui.laydate,
                form = layui.form;
            lay('.dateInput').each(function () {
                laydate.render({
                    elem:this,
                    type:'date',
                    format:'yyyyMMdd'
                });
            });
            var userId = getUrlParam('id');
            var session = getUrlParam('session');
            var type = 'quarter';
            $('.endInput').val(session);
            $('input[name="type"][value="'+type+'"]').attr('checked',true);
            form.render();
            var myChart = echarts.init(document.getElementById('chartBox'));
            myChart.setOption({
                title: {
                    text: '数据统计查看'
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox:{
                    show:true,
                    feature:{
                        saveAsImage:{},
                        restore:{},
                        magicType: {
                            type: ['line', 'bar', 'stack', 'tiled']
                        }
                    }
                },
                legend: {
                    data:['赔率']
                },
                xAxis: {
                    data: [],
                    name:'比赛'
                },
                yAxis: {
                    nmae:'赔率'
                },
                series: [{
                    name: '赔率',
                    type: 'line',
                    data: []
                }]
            });
            getInfo();
            $('.search-btn').click(function () {
                getInfo();
            });
            form.on('radio(type)',function (data) {
               //console.log(data.value);
                getInfo();
            });

            function getInfo() {
                var start = $('.startInput').val();
                var end = $('.endInput').val();
                var type = $('input[name="type"]:checked').val();
                myChart.showLoading();
                $.get('{{ url('admin/lottery/statistic') }}',{start:start,end:end,type:type,id:userId},function (res) {
                    myChart.hideLoading();
                    if(res.status == 200){
                        var info = res.data.info;
                        var matches = res.data.matches;
                        var xData = [];
                        var yData = [];
                        $.each(matches,function (i,e) {
                            xData.push(e.session+'_'+e.number);
                            yData.push(e.odds);
                        });
                        myChart.setOption({
                           title:{
                               text:info.nickname+'数据统计',
                               textStyle:{
                                   fontSize:14
                               },
                               subtext:'推荐'+info.total_number+'场，命中'+info.hit_number+'场，命中率:'+info.rate+'%，获得积分'+(info.total_odds-info.pay_scores).toFixed(2),
                               subtextStyle:{
                                   color:'red'
                               }
                           },
                            legend:{
                               data:['赔率']
                            },
                            xAxis: {
                                data: xData
                            },
                            yAxis: {},
                            series: [{
                                name: '赔率',
                                type: 'line',
                                data: yData
                            }]
                        });
                    }
                },'json')
            };

        })
    </script>
@endsection